<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 

<!DOCTYPE HTML>
<html>
  <head>
    	<title>My JSP 'test.jsp' starting page</title>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<jsp:include page="../common/include.jsp"></jsp:include>
		 <style scoped>
            #example h2 {
                font-weight: normal;
            }
            #email-settings {
                height: 135px;
                width: 395px;
                margin: 30px auto;
                padding: 110px 0 0 30px;
                background: url('../../content/web/datepicker/mailSettings.png') transparent no-repeat 0 0;
            }
        </style>
		<script>
            $(document).ready(function() {
                $("#datepicker").kendoDatePicker();
                $("#monthpicker").kendoDatePicker({
                    start: "year",
                    depth: "year",
                    format: "MMMM yyyy"
                });
            });
        </script>
  </head>
  
 <body>
    
        <div id="example" class="k-content">
            <div id="email-settings">
                <div style="margin-top: -6px; margin-left: 180px">
                     <input id="datepicker" value="10/10/2011" style="width:150px;" />
                  
                </div>
               <div style="margin-top: 10px; margin-left: 180px;margin-bottom: 10px;">
                   <input id="monthpicker" value="November 2011" style="width:150px" />
                </div>
            </div>
            
            <div style="margin-top: 10px; margin-left: 180px;margin-bottom: 10px;">
				<a href="${basePath}jsp/getReceiptAddressList.do">
					test
				</a>
			</div>
        </div>
 
<script type="text/javascript" src="test.js"></script>

 <div id="example1" class="k-content">
            <div class="demo-section">
                <h3>Grid with multiple row selection enabled</h3>
                <div id="rowSelection"></div>
            </div>
            <div class="demo-section">
                <h3>Grid with multiple cell selection enabled</h3>
                <div id="cellSelection"></div>
            </div>

            <script>
                $(document).ready(function () {
                    $("#rowSelection").kendoGrid({
                        dataSource: {
                            data: orders,
                            pageSize: 5
                        },
                        selectable: "multiple",
                        pageable: {
                            buttonCount: 5
                        },
                        scrollable: false,
                        navigatable: true,
                        columns: [
                            {
                                field: "ShipCountry",
                                title: "Ship Country",
                                width: 200
                            },
                            {
                                field: "Freight",
                                width: 200
                            },
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                format: "{0:dd/MM/yyyy}"
                            }, 
                            { command: [ 
                            	{
							        name: "details",
							        dblick: function(e) {
							          // e.target is the DOM element representing the button
							          var tr = $(e.target).closest("tr"); // get the current table row (tr)
							          // get the data bound to the current table row
							          var data = this.dataItem(tr);
							          console.log("Details for: " + data.name);
							        }
						      	} ]
  							 }
                        ]
                    });
                });
            </script>
            <style scoped>
                .demo-section {
                    width: 600px;
                }
                .demo-section h3 {
                    margin: 5px 0 15px 0;
                    text-align: center;
                }
            </style>
        </div>
	
			
</body>
</html>